<template>
    <div id="main">
        <div id='myChart' ref="myChart"></div>
    </div>
</template>
<script>
    import echarts from 'echarts'

    export default {
        name: 'echarts',
        data () {
            return {
                resData: '',
                echartsOption: {
                    color:['#ccc','yellow','pink','green'],
                    title: { //标题
                        show:false
                    },
                    tooltip: { //提示框
                        show: false,
                        trigger: 'axis',//触发类型：坐标轴触发
                        confine: true, //限制在图表的区域内
                        axisPointer: { //坐标轴指示器配置项
                            type: 'cross' //指示器类型，十字准星
                        },
                        formatter: function (params) {
                            return params[0].name + '<br>' +
                                    params[0].seriesName + ':' + '<br>' +
                                    '开盘:' + params[0].value[1] + '<br>' +
                                    '收盘:' + params[0].value[2] + '<br>' +
                                    '最低:' + params[0].value[3] + '<br>' +
                                    '最高:' + params[0].value[4] + '<br>' +
                                    'M5:' + params[1].value + '<br>' +
                                    'M10:' + params[2].value + '<br>' +
                                    'M20:' + params[3].value + '<br>' +
                                    'M30:' + params[4].value
                        }
                    },
                    legend: { //图例控件，点击图例控制哪些系列不现实
                        // show: false,
                        data: ['日线', 'M5', 'M10', 'M20', 'M30']
                    },
                    grid: {     //直角坐标系
                        show:true,
                        width: 'auto',
                        height: '80%',
                        borderColor: '#ccc',
                        borderWidth: '1',
                        top: '10%',
                        left: '12%',
                        right: '3%',
                        bottom: '20%'
                    },
                    xAxis: {
                        type: 'category',  //坐标轴类型，类目轴
                        data: [],  //x轴对应的数据
                        scale: true,
                        boundaryGap: false,   //刻度作为分割线，标签和数据点会在两个刻度上
                        axisLine: {  //x轴线
                            onZero: false,
                            show: false, 
                            lineStyle:{
                                color: '#ccc',
                            }
                        },
                        splitLine: { 
                            show: false 
                        },  //是否显示坐标轴轴线
                        splitNumber: 20, //坐标轴的分割段数，预估值，在类目轴中无效
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#ccc',
                                fontSize: '10'
                            }
                        },
                        min: 'dataMin', //特殊值，数轴上的最小值作为最小刻度
                        max: 'dataMax'  //特殊值，数轴上的最大值作为最大刻度
                    },

                    yAxis: {
                        scale: true,   //坐标刻度不强制包含零刻度
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#ccc',
                                fontSize: '10'
                            }
                        },
                        axisLine:{ //y轴线
                            show: false, 
                            lineStyle:{
                                color: '#ccc',
                            }
                        },
                        splitArea: {
                            show: false //显示分割区域
                        }
                    },
                    dataZoom: [     //用于区域缩放
                        {
                            filterMode:'filter',    //当前数据窗口外的数据被过滤掉来达到数据窗口缩放的效果  默认值filter
                            type: 'inside', //内置型数据区域缩放组件
                            start: 20,      //数据窗口范围的起始百分比
                            end: 80        //数据窗口范围的结束百分比
                        },
                        {
                            show: false,
                            type: 'slider', //滑动条型数据区域缩放组件
                            y: '90%',
                            start: 50,
                            end: 100
                        }
                    ],
                    series: [{  //图表类型
                        name: '日线',
                        type: 'candlestick',    //K线图
                        data: [],   //y轴对应的数据
                        itemStyle: {
                            normal: {
                                color: '#ec0000',
                                color0: '#00da3c',
                                borderColor: '#8A0000',
                                borderColor0: '#008F28'
                            }
                        }
                    },
                    {   //MA5 5天内的收盘价之和/5
                        name: 'M5',
                        type: 'line',
                        symbol: "none",
                        data: [],
                        smooth: true,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: "#ccc"//折线的颜色
                                }
                            }
                        }
                    },
                    {
                        name: 'M10',
                        type: 'line',
                        symbol: "none",
                        data: [],
                        smooth: true,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: "yellow"//折线的颜色
                                }
                            }
                        }
                    },
                    {
                        name: 'M20',
                        type: 'line',
                        symbol: "none",
                        data: [],
                        smooth: true,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: "pink"//折线的颜色
                                }
                            }
                        }
                    },
                    {
                        name: 'M30',
                        type: 'line',
                        symbol: "none",
                        data: [],
                        smooth: true,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: "green"//折线的颜色
                                }
                            }
                        }
                    }]
                }
            }
        },
        mounted () {
            this.setEchartOption()
            this.myChart = echarts.init(document.getElementById('myChart'))
            this.myChart.setOption(this.echartsOption)
        },
        methods: {
            setEchartOption () {
                // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
                var resData = splitData([
                    ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
                    ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
                    ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
                    ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
                    ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
                    ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
                    ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
                    ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
                    ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
                    ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
                    ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
                    ['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
                    ['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
                    ['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
                    ['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
                    ['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
                    ['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
                    ['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
                    ['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
                    ['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
                    ['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
                    ['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
                    ['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
                    ['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
                    ['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
                    ['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
                    ['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
                    ['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
                    ['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
                    ['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
                    ['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
                    ['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
                    ['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
                    ['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
                    ['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
                    ['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
                    ['2013/3/22', 2321.4, 2328.28, 2314.97, 2332]
                ])
                
                this.echartsOption.xAxis.data = resData.categoryData
                this.echartsOption.series[0].data = resData.values
                this.echartsOption.series[1].data = calculateMA(5)
                this.echartsOption.series[2].data = calculateMA(10)
                this.echartsOption.series[3].data = calculateMA(20)
                this.echartsOption.series[4].data = calculateMA(30)

                function splitData (rawData) {
                    var categoryData = []
                    var values = []
                    for (var i = 0; i < rawData.length; i++) {
                        categoryData.push(rawData[i].splice(0, 1)[0])
                        values.push(rawData[i])
                    }
                    return {
                        categoryData: categoryData,
                        values: values
                    }
                }
                //计算MA平均线，N日移动平均线=N日收盘价之和/N  dayCount要计算的天数(5,10,20,30)
                function calculateMA(dayCount) {
                    var result = [];
                    for (var i = 0, len = resData.values.length; i < len; i++) {
                        if (i < dayCount) {
                            result.push('-');
                            continue;   //结束单次循环，即不输出本次结果
                        }
                        var sum = 0;
                        for (var j = 0; j < dayCount; j++) {
                            //收盘价总和
                            sum += resData.values[i - j][1];
                            // alert(sum);
                        }
                        result.push(sum / dayCount);
                        // alert(result);
                    }
                    return result;
                }
            }
        }
    }
</script>
<style scoped>
    #main {
        background: #fff;
    }
    #myChart{
        width: 100%;
        height: 5rem;
        margin: 0 auto;
    }
    #myChart1{
        width: 100%;
        height: 5rem;
        margin: 0 auto;
    }
    
</style>